<template>
    <ContentFileld>
        <div class="row">
            <div class="col-3">
                <div class="card">
                    <div class="card-body">
                        <img style="width: 100%;" :src="$store.state.user.photo" alt="">
                        <div class="name">{{ $store.state.user.username }}</div>
                    </div>
                </div>
            </div>
            <div class="col-9">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span style="font-size: 120%">我的Bots</span>
                        <button type="button" class="btn btn-success" data-bs-toggle="modal"
                                data-bs-target="#create-bot">
                            +创建Bot
                        </button>

                        <div class="modal" id="create-bot" aria-hidden="true" aria-labelledby="exampleModalLabel"
                             tabindex="-1">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">创建Bot</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="mb-3">
                                            <label for="id">名称</label>
                                            <input v-model="botadd.title" type="text" class="form-control" id="id"
                                                   placeholder="请输入标题">
                                        </div>
                                        <div class="mb-3">
                                            <label for="description">描述</label>
                                            <textarea v-model="botadd.description" class="form-control" id="description"
                                                      rows="3"></textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label for="content">代码</label>
                                            <VAceEditor v-model:value="botadd.content" @init="editorInit" lang="c_cpp"
                                                        theme="textmate" style="height: 300px" :options="{
                                                    enableBasicAutocompletion: true, //启用基本自动完成
                                                    enableSnippets: true, // 启用代码段
                                                    enableLiveAutocompletion: true, // 启用实时自动完成
                                                    fontSize: 18, //设置字号
                                                    tabSize: 4, // 标签大小
                                                    showPrintMargin: false, //去除编辑器里的竖线
                                                    highlightActiveLine: true,
                                                }">

                                            </VAceEditor>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <div style="color:red;">{{ botadd.message }}</div>
                                        <button type="button" class="btn btn-primary" @click="addBot">确定</button>
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消
                                        </button>

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="card-body">
                        <table class="table table-striped ">
                            <thead>
                            <tr>
                                <th scope="col">名称</th>
                                <th scope="col">创建时间</th>
                                <th scope="col">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="bot in bots" :key="bot.id">
                                <td style="vertical-align: middle">{{ bot.title }}</td>
                                <td style="vertical-align: middle">{{ bot.createTime }}</td>
                                <td>
                                    <button type="button" class="btn btn-primary" style="margin-right: 10px"
                                            data-bs-toggle="modal" :data-bs-target="'#update-bot'+bot.id">修改
                                    </button>
                                    <button type="button" class="btn btn-danger" @click="remove(bot)">删除</button>


                                    <div class="modal" :id="'update-bot'+bot.id" aria-hidden="true"
                                         aria-labelledby="exampleModalLabel" tabindex="-1">
                                        <div class="modal-dialog modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">修改Bot</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="mb-3">
                                                        <label for="id">名称</label>
                                                        <input v-model="bot.title" type="text" class="form-control"
                                                               id="id" placeholder="请输入标题">
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="description">描述</label>
                                                        <textarea v-model="bot.description" class="form-control"
                                                                  id="description" rows="3"></textarea>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="content">代码</label>
                                                        <VAceEditor v-model:value="bot.content" @init="editorInit"
                                                                    lang="c_cpp" theme="textmate" style="height: 300px"
                                                                    :options="{
                                                                    enableBasicAutocompletion: true, //启用基本自动完成
                                                                    enableSnippets: true, // 启用代码段
                                                                    enableLiveAutocompletion: true, // 启用实时自动完成
                                                                    fontSize: 18, //设置字号
                                                                    tabSize: 4, // 标签大小
                                                                    showPrintMargin: false, //去除编辑器里的竖线
                                                                    highlightActiveLine: true,
                                                                }" >

                                                        </VAceEditor>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <div style="color: red">{{ botadd.message }}</div>
                                                    <button type="button" class="btn btn-primary" @click="update(bot)">
                                                        确定
                                                    </button>
                                                    <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">取消
                                                    </button>

                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </ContentFileld>
</template>

<script>
import ContentFileld from '@/components/ContentFileld.vue';
import $ from "jquery";
import {useStore} from "vuex";
import {reactive, ref} from "vue";
import {Modal} from 'bootstrap/dist/js/bootstrap'
import {VAceEditor} from 'vue3-ace-editor';
import 'ace-builds/src-noconflict/mode-c_cpp';
import ace from 'ace-builds';


export default {
    name: "userBotsIndex",
    components: {
        ContentFileld,
        VAceEditor,
    },

    setup() {
        ace.config.set(
            "basePath",
            "https://cdn.jsdelivr.net/npm/ace-builds@" +
            require("ace-builds").version +
            "/src-noconflict/");



        const store = useStore();
        let bots = ref([]);
        let botadd = reactive({
            title: "",
            description: "",
            content: "",
            message: "",
        })
        const getlist = () => {
            $.ajax({
                url: "http://localhost:3000/user/bot/getlist",
                type: "get",
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    bots.value = resp;
                },
            })
        }
        getlist();

        const addBot = () => {
            $.ajax({
                url: "http://localhost:3000/user/bot/add",
                type: "post",
                data: {
                    title: botadd.title,
                    description: botadd.description,
                    content: botadd.content,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    if (resp.message !== "success") {
                        botadd.message = resp.message;
                    } else {
                        botadd.title = "";
                        botadd.description = "";
                        botadd.content = "";
                        Modal.getInstance("#create-bot").hide();
                        getlist();
                    }

                },
            })
        }

        const remove = (bot) => {
            $.ajax({
                url: "http://localhost:3000/user/bot/remove",
                type: "post",
                data: {
                    id: bot.id,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    if (resp.message === "success") {
                        getlist();
                    }
                }
            })
        }

        const update = (bot) => {
            $.ajax({
                url: "http://localhost:3000/user/bot/update",
                type: "post",
                data: {
                    id: bot.id,
                    title: bot.title,
                    description: bot.description,
                    content: bot.content
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    if (resp.message === "success") {
                        Modal.getInstance('#update-bot' + bot.id).hide();
                        getlist();
                    } else {
                        botadd.message = resp.message
                    }
                }
            })
        }

        return {
            bots,
            botadd,
            addBot,
            remove,
            update,
        }
    }
};
</script>

<style>
.name {
    text-align: center;
    font-size: 150%;
}
</style>
